<template>
    <div flex h-full>
        <div m-auto bg-gray-100 w-350 flex flex-col items-center border border-gray-300 p-30 rounded-10>
            <h5 text-24 font-normal color="#6a6a6a">
                {{ title }}
            </h5>
            <div mt-30 w-full>
                <n-input v-model:value="loginInfo.name" autofocus class="text-16 items-center h-50 pl-10"
                    placeholder="admin" :maxlength="20">
                </n-input>
            </div>
            <div mt-30 w-full>
                <n-input v-model:value="loginInfo.password" class="text-16 items-center h-50 pl-10" type="password"
                    show-password-on="mousedown" placeholder="123456" :maxlength="20" @keydown.enter="handleLogin" />
            </div>

            <div mt-20 w-full>
                <n-button w-full h-50 rounded-5 text-16 type="primary" @click="handleLogin">登录</n-button>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { useAccountStore } from '@/stores/account'
import { ref } from 'vue'

const title = import.meta.env.VITE_APP_TITLE
const account = useAccountStore();

const loginInfo = ref({
    name: '',
    password: '',
})

async function handleLogin() {
    const { name, password } = loginInfo.value
    if (!name || !password) {
        $message.warning('请输入用户名和密码')
        return
    }

    await account.login(name, password.toString());
}
</script>